<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<section class="content-header">
	<h1>
		<i class="fa fa-pie-chart"></i> 房间类型管理 <small></small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		<li class="active">房间类型管理 </li>
	</ol>
</section>

<section class="content">
	<div class="box">
		<div class="box-header">
			<button id="btn-add"  type="button" class="layui-btn layui-btn-radius layui-btn-green">
				<i class="layui-icon">&#xe654;</i>创建类型
			</button>
			<button id="btn-edit"  type="button" class="layui-btn layui-btn-radius layui-btn-warm">
				<i class="layui-icon">&#xe642;</i>修改类型
			</button>
			<button id="btn-del"  type="button" class="layui-btn layui-btn-radius layui-btn-danger">
				<i class="layui-icon">&#xe640;</i>删除类型
			</button>
        </div>
        
		<div class="box-body">
			<table class="table table-bordered table-striped" id="categorylist">
				<thead>
            		<tr>
            			<th>ID</th> <th>房间类型名称</th> <th>床型</th> <th>可住人数/人</th>
            			<th>详细说明</th>
            		</tr>
        		</thead>
        		<tbody>
        		</tbody>
			</table>
		</div>
     </div>
</section>

<script type="text/javascript">
$(document).ready(function() {
	
	//DataTable初始化
	var table =  $('#categorylist').DataTable( {
        "ajax": "categorylist",
        "language": {
			"url": "AdminLTE/components/datatables/i18n/Chinese.json"
		},
        "columns": [
            { "data": "categoryid" },
            { "data": "categoryName" },
            { "data": "bed.name" },
            { "data": "capacity" },
            { "data": "detail" }
        ],
        responsive: true,	//表格搜索功能
        select: true	//datatables select 插件,使每一行可选中
    } );
	
	$('#btn-add').click( function () {
		layer.open({  //layer弹出层
			  type: 2,
			  title:"创建类型",
			  area: ['800px', '400px'],
			  //content: ['addUser','no'],//无滚动条
			  content: 'addCategory',
			  shade: [0.6, '#000'],//阴影透明度
			  //shadeClose: true,//点击阴影关闭
			  anim:2,//弹出动画
			  isOutAnim: false,//关闭无动画
			  //skin: 'layui-layer-molv',//皮肤
			  end : function(index){
				  table.ajax.reload();
			  }
		});
    } ); 

	$('#btn-edit').click(function() {
		var rowData =table.rows( { selected: true } ).data().toArray();
   		 if(rowData.length==1){
   			var categoryid = rowData[0].categoryid;
   			layer.open({
    			  type: 2,
    			  title:"修改类型",
    			  area: ['800px', '530px'],
    			  content:'editCategory?categoryid='+categoryid,
    			  shade: [0.6, '#000'],//阴影透明度
    			  //shadeClose: true,//点击阴影关闭
    			  anim:2,//弹出动画
    			  isOutAnim: false,//关闭无动画
    			  end : function(index){
    				  table.ajax.reload();
    			  } 
    		});
   		 }else{
   			 layer.msg('请选择一行!', {time: 800, icon:7});
   		 }
	 });
	
	/* 删除按钮 */
	$('#btn-del').click( function () {
		 var rowData =table.rows( { selected: true } ).data().toArray();  //得到datatables选中行的值并转成数组
		 if(rowData.length==1){
			 layer.msg('你确定删除该记录吗?', {time: 0 ,btn: ['确定', '取消'],yes: function(index){
 			 	$.ajax({
     				type : "post",
     				url : "deleteCategory?categoryid="+rowData[0].categoryid,
     				dataType : "json",
     				success : function(data) {
     					layer.msg('删除成功', {time: 1000, icon:1});
     					table.ajax.reload();
     				},
     				error : function() {
     					layer.msg('系统出错!', {time: 1000, icon:2});
     				}
     			});
 			 	layer.close(index);
	   		}
			});	
		 }else{
			 layer.msg('请选择一行!', {time: 1000, icon:7});
		 }
	} );
});
</script>